<!-- 设置面包屑 -->
#set($breadcrumbs = [{"name":"资料管理","url":"$!{base}/image/list"},{"name":"资料采集"}])
<!-- 设置功能描述 -->
#set($feature = {"major":"资料管理","minor":"资料采集"})
<!-- 设置导航高亮 -->
#set($subList = "image_gather")
<!-- 页面设置结束 -->
#if($obj.data.errors.size() > 0)
<ul class="list-group">
	#foreach($error in $obj.data.errors.entrySet())
	<!-- 循环开始 -->
	<li class="list-group-item list-group-item-warning">$!{error.value}</li>
	<!-- 循环结束 -->
	#end
</ul>
#else
<div class="row">
	<div class="col-md-6">
		<div class="widget-box">
			<div class="widget-header">
				<div class="widget-title">
					<div class="col-md-5">
						<div class="input-group">
							<span class="input-group-addon"> <i class="ace-icon fa fa-qrcode"></i> 二维码
							</span> <input class="form-control" type="text" id="qrcode">
						</div>
					</div>
				</div>
				<div class="widget-toolbar">
					<button id="upload_pic" class="btn btn-xs btn-purple ">
						上传图片 <i class="fa fa-cloud-upload"></i>
					</button>
				</div>

			</div>

			<div class="widget-body">
				<div class="widget-main" id="image-preview">

					<div class="hide" id="card-div">
						<div class="input-group">
							<span class="input-group-addon">姓名 </span> <input class="form-control" type="text" id="card_name" name="card.name">
						</div>


						<div class="row">
							<div class="col-md-6">
								<div class="input-group">
									<span class="input-group-addon">性别 </span> <input class="form-control" type="text" id="card_sex" name="card.sex">
								</div>
							</div>
							<div class="col-md-6">
								<div class="input-group">
									<span class="input-group-addon">民族 </span> <input class="form-control" type="text" id="card_volk" name="card.volk">
								</div>
							</div>
						</div>

						<div class="input-group">
							<span class="input-group-addon">出生 </span> <input class="form-control" type="text" id="card_birth" name="card.birthDay">
						</div>

						<div class="input-group">
							<span class="input-group-addon">住址 </span> <input class="form-control" type="text" id="card_address" name="card.address">
						</div>

						<div class="input-group">
							<span class="input-group-addon">身份证号码 </span> <input class="form-control" type="text" id="card_id" name="card.id">
						</div>

					</div>
				</div>
			</div>
		</div>


	</div>
	<div class="col-md-6">

		<div class="widget-box">
			<div class="widget-header">
				<h6 class="widget-title">
					<button id="get_pic" class="btn btn-xs btn-primary">
						获取图片 <i class="fa fa-image"></i>
					</button>
					<button id="setting" class="btn btn-xs btn-primary">
						镜头参数 <i class="fa fa-camera"></i>
					</button>
					<button id="image_setting" class="btn btn-xs btn-primary">
						图像设置 <i class="fa fa-gear"></i>
					</button>
					<button id="rote" class="btn btn-xs btn-primary">
						图像旋转 <i class="fa fa-rotate-right"></i>
					</button>
					<button id="recycle" class="btn btn-xs btn-primary">
						清空缓存 <i class="fa fa-recycle"></i>
					</button>
				</h6>

				<div class="widget-toolbar">
					<label> <input type="checkbox" class="ace ace-switch ace-switch-2" id="captrue-switcher"> <span class="lbl middle"></span>
					</label>
				</div>

				<div class="widget-toolbar">
					<select id="docType">
						<!-- 资料类型 --> #foreach($type in $obj.data.types)
						<option value="$!{type}" #if($type== $obj.data.type)selected#end>$!{type.name}</option>
						<!-- 遍历结束 --> #end
					</select>
				</div>

			</div>

			<div class="widget-body">
				<div class="widget-main">
					<div style="text-align:center;" id="oxc-captrue">
						<object classid="clsid:454C18E2-8B7D-43C6-8C17-B1825B49D7DE" id="captrue" width="100%" codebase='${obj.data.oxcSource}'></object>
					</div>
					<div class="row">
						<div class="col-md-4">
							<div class="input-group">
								<span class="input-group-addon btn-info"> 亮度 </span> <select class="form-control" onchange="setBrightness(this)">
									<option>请选择亮度</option>
									<optgroup label="-------------------">
										#foreach($i in $obj.data.numbers)
										<option #if($i== 20) selected#end>$!{i}</option>
										#end
									</optgroup>
								</select>
							</div>
						</div>
						<div class="col-md-4">
							<div class="input-group">
								<span class="input-group-addon btn-info"> 对比度 </span> <select class="form-control" onchange="setContrast(this)">
									<option>请选择对比度</option>
									<optgroup label="-------------------">
										#foreach($i in $obj.data.numbers)
										<option #if($i== 20) selected#end>$!{i}</option>
										#end
									</optgroup>
								</select>
							</div>
						</div>
						<div class="col-md-4">
							<div class="input-group">
								<span class="input-group-addon btn-info"> 曝光度 </span> <select class="form-control" onchange="setExposure(this)">
									<option>请选择曝光度</option>
									<optgroup label="-------------------">
										#foreach($i in $obj.data.numbers)
										<option #if($i== 50) selected#end>$!{i}</option>
										#end
									</optgroup>
								</select>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>
#end
<script type="text/javascript" src="$!{base}/resources/layer/extend/layer.ext.js"></script>
<script>
	$(function() {

		$("#captrue").height($("#captrue").width() * 0.75);
		setTimeout(function() {
			if (captrue) {//如果加载过oxc自动启动摄像头
				captrue.bStopPlay();
				if (captrue.bStartPlay()) {
					$("#captrue-switcher")[0].checked = true;
				}
				defaultSetting();
			}
		}, 1000);
		//开关功能
		$("#captrue-switcher").on('click', function() {
			if (this.checked) {
				showMessage("正在打开摄像头...");
				captrue.bStartPlay();
				defaultSetting();
			} else {
				showMessage("正在关闭摄像头...");
				captrue.bStopPlay();
			}
		});
		//旋转功能
		$("#rote").on('click', function() {
			if (captureOn()) {
				if ($(this).text().indexOf('旋转') >= 0) {
					$(this).html('恢复图像 <i class="fa fa-rotate-right"></i>');
					captrue.bStopPlay();
					captrue.bStartPlayRotate(270);
				} else {
					$(this).html('图像旋转 <i class="fa fa-rotate-right"></i>');
					captrue.bStopPlay();
					captrue.bStartPlay()
				}
				defaultSetting();
			} else {
				showMessage("摄像头未开启");
			}
		});
		//图像设置
		$("#image_setting").on('click', function() {
			if (captureOn()) {
				captrue.displayVideoPara();
			} else {
				showMessage("摄像头未开启");
			}
		});
		$("#setting").on('click', function() {
			if (captureOn()) {
				captrue.vSetCapturePin();
				captrue.bStartPlay();
			} else {
				showMessage("摄像头未开启");
			}
		});

		$("#get_pic").on('click', getPic);
		//上传图片
		$('#upload_pic').on('click', function() {
			var qrcode = $('#qrcode').val();
			var docType = $('#docType').val();
			var deviceId = captrue.sGetDevicesId();
			var uploadData = {
				qrcode : qrcode,
				docType : docType,
				deviceId : deviceId
			}
			var dataArray = [];//声明一个空的数组来存图片
			if (!qrcode && 'FINANCE' == docType) {
				validationFail("二维码识别失败,请输入二维码信息", $('#qrcode'));
				return;
			}
			if ('IDCARD' == docType) {
				var idcard = {
					id : $("#card_id").val(),
					name : $("#card_name").val(),
					sex : $("#card_sex").val() == '男' ? 'MALE' : 'FEMALE',
					volk : $("#card_volk").val(),
					birthDay : $("#card_birth").val(),
					address : $("#card_address").val()
				}
				uploadData.card = JSON.stringify(idcard);
			}
			$('#image-preview').find('.row').each(function(i, item) {
				var dataItem = {
					data : $(item).find('img').attr('src'),
					remark : $(item).find('textarea').val()
				}
				dataArray.push(dataItem);
			});
			uploadData['dataArray'] = JSON.stringify(dataArray);
			var index = layer.msg("正在上传...", {
				icon : 4,
				time : 10 * 1000
			});
			$.post(getRootPath() + '/image/upload', uploadData, function(result) {
				layer.close(index);
				if (result.operationState == 'SUCCESS') {
					showMessage("上传成功!");
					setTimeout(function() {
						location.reload();
					}, 3000);
				} else {
					showMessage(result.data.reason);
				}
			}, 'json');
		});
	})
	function uuid() {
		var s = [];
		var hexDigits = "0123456789abcdef";
		for (var i = 0; i < 36; i++) {
			s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
		}
		s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
		s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
		s[8] = s[13] = s[18] = s[23] = "-";

		var uuid = s.join("");
		return uuid;
	}

	function getPic() {
		var imgId = uuid();
		if (captureOn()) {
			$('#docType')[0].disabled = true;//禁用框框,防止脏数
			switch ($('#docType').val()) {
			case 'DOC':
				var img = $('<img>').attr('src', 'data:image/jpeg;base64,' + captrue.sGetBase64()).attr("id", imgId);//JPG图片较小 差不多能达到300k以内
				img.attr('width', $('#image-preview').width() / 4);
				var imageBlock = $('<div>').addClass('col-md-3').append(img);
				var inputBlock = $('<div>').addClass('col-md-9').html(
						'<textarea class="form-control" placeholder="请输入图片备注信息"></textarea><button class="btn btn-xs btn-info" onclick="preview(\'' + imgId
								+ '\')">全屏预览</button> <button class="btn btn-xs btn-danger" onclick="deleteImage(this)">删除</button>');
				var row = $('<div>').addClass('row').append(imageBlock).append(inputBlock);
				$('#image-preview').append(row).append('<div class="space-4"></div>');
				break;
			case 'IDCARD':
				var base64 = captrue.sGetBase64();
				var img = $('<img>').attr('src', 'data:image/jpeg;base64,' + base64).attr("id", imgId);//JPG图片较小 差不多能达到300k以内
				img.attr('width', $('#image-preview').width());
				var imageBlock = $('<div>').addClass('col-md-12').append(img);
				var row = $('<div>').addClass('row').append(imageBlock);
				$('#image-preview').append(row).append('<div class="space-4"></div>');
				var index = layer.msg("正在识别身份证...", {
					icon : 4,
					time : 10 * 1000
				});
				$.post(getRootPath() + '/image/baiduOcr', {
					img : base64
				}, function(result) {
					layer.close(index);
					$('#image-preview').append($('#card-div').html());
					$('#card-div').remove();
					if (result.operationState == 'SUCCESS') {
						$('#card_name').val(result.data.card.name);
						$('#card_sex').val(result.data.card.sex == 'MALE' ? "男" : "女");
						$('#card_volk').val(result.data.card.volk);
						$('#card_birth').val(result.data.card.birthDay);
						$('#card_address').val(result.data.card.address);
						$('#card_id').val(result.data.card.id);
					} else {
						showMessage(result.data.reason + "<br>请填入身份证相关的信息之后提交");
					}
					$("#get_pic")[0].disabled = true;//禁止再次拍摄
				}, 'json').fail(function() {
					layer.close(index);
					$('#image-preview').append($('#card-div').html());
					$('#card-div').remove();
					showMessage("身份证识别失败" + "<br>请填入身份证相关的信息之后提交");
					$("#get_pic")[0].disabled = true;//禁止再次拍摄
				}).done(
						function() {
							var inputBlock = $('<div>').addClass('col-md-12').html(
									'<button class="btn btn-xs btn-info" onclick="preview(\'' + imgId
											+ '\')">全屏预览</button> <button class="btn btn-xs btn-danger" onclick="location.reload()">重新采集</button>');
							var row = $('<div>').addClass('row').append(inputBlock);
							$('#image-preview').append(row).append('<div class="space-4"></div>');
						});
				break;
			default:
				if (!$('#qrcode').val()) {//先取二维码
					$('#qrcode').val(captrue.sGetBarCodeOnline());
				}
				var img = $('<img>').attr('src', 'data:image/jpeg;base64,' + captrue.sGetBase64()).attr("id", imgId);//JPG图片较小 差不多能达到300k以内
				img.attr('width', $('#image-preview').width() / 4);
				var imageBlock = $('<div>').addClass('col-md-3').append(img);
				var inputBlock = $('<div>').addClass('col-md-9').html(
						'<textarea class="form-control" placeholder="请输入图片备注信息"></textarea><button class="btn btn-xs btn-info" onclick="preview(\'' + imgId
								+ '\')">全屏预览</button> <button class="btn btn-xs btn-danger" onclick="deleteImage(this)">删除</button>');
				var row = $('<div>').addClass('row').append(imageBlock).append(inputBlock);
				$('#image-preview').append(row).append('<div class="space-4"></div>');
				break;
			}
		} else {
			showMessage("摄像头未开启");
		}
	}

	//设置亮度
	function setBrightness(dom) {
		captrue.vSetBrightness($(dom).val());
	}
	//设置对比度
	function setContrast(dom) {
		captrue.vSetContrast($(dom).val());
	}
	//设置曝光度
	function setExposure(dom) {
		captrue.vSetExposure($(dom).val());
	}

	function preview(selector) {
		$('#oxc-captrue').hide();
		layer.photos({
			photos : {
				"start" : 0, //初始显示的图片序号，默认0
				"data" : [ //相册包含的图片，数组格式
				{
					"alt" : "预览",
					"src" : $('#' + selector).attr('src'), //原图地址
				} ]
			},
			end : function() {//销毁的时候将OXC控件显示出来
				$('#oxc-captrue').show();
			}
		});
	}

	function discriminate(dom) {
		var img = $(dom).parent().prev().find('img')
		console.log(img.attr('src'));//todo上传信息到服务器并设别这个二维码
		$.post(getRootPath() + '/image/discriminate', {
			data : img.attr('src')
		}, function(result) {
			console.log(result);
			if (result.operationState == 'SUCCESS') {
				$('#qrcode').val(result.data.code);
			} else {
				showMessage(result.data.reason);
			}
		}, 'json');
	}

	function deleteImage(dom) {
		var previewBlock = $(dom).parent().parent();
		var blankBlock = previewBlock.next();
		previewBlock.remove();
		blankBlock.remove();
	}

	function captureOn() {
		return $("#captrue-switcher")[0].checked;
	}

	function defaultSetting() {
		captrue.vSetDelHBFlag(1);//默认设置切边
		captrue.bSetMode(3)//设置自动裁剪模式
		captrue.vSetImageQuality(90)
		captrue.vSetResolution(1)//设置分辨率
	}
</script>
